<template>
  <el-card class="box-card">
    <div class="table-page-search-wrapper">
      <el-form :inline="true">
        <!--  人员下拉选择 -->
        <el-row :gutter="24">
          <el-col :span="2"> 选择人员下拉组件 </el-col>
          <el-col :span="10">
            <enjoy-select-user multiple v-model="form.users">
            </enjoy-select-user>
          </el-col>
          <el-col :span="12">选中值：{{ form.users }}</el-col>
        </el-row>
        <!--  客户下拉选择 -->
        <el-row :gutter="24">
          <el-col :span="2"> 选择客户下拉组件 </el-col>
          <el-col :span="10">
            <enjoy-select-user multiple v-model="form.customer">
            </enjoy-select-user>
          </el-col>
          <el-col :span="12">选中值：{{ form.customer }}</el-col>
        </el-row>
        <!--  产品下拉选择 -->
        <el-row :gutter="24">
          <el-col :span="2"> 选择客户下拉组件 </el-col>
          <el-col :span="10">
            <enjoy-select-user multiple v-model="form.customer">
            </enjoy-select-user>
          </el-col>
          <el-col :span="12">选中值：{{ form.customer }}</el-col>
        </el-row>
        <!--  指标编码下拉选择 -->
        <el-row :gutter="24">
          <el-col :span="2"> 选择指标编码下拉组件 </el-col>
          <el-col :span="10">
            <enjoy-Indicator-coding v-model="form.ptTargetCode">
                 </enjoy-Indicator-coding>
          </el-col>
          <el-col :span="12">选中值：{{ form.ptTargetCode }}</el-col>
        </el-row>
        <!--  零件下拉选择 -->
        <el-row :gutter="24">
          <el-col :span="2"> 选择零件下拉组件 </el-col>
          <el-col :span="10">
            <enjoy-select-part v-model="form.part"> </enjoy-select-part>
          </el-col>
          <el-col :span="12">选中值：{{ form.part }}</el-col>
        </el-row>
        <!--  产品下拉选择 -->
        <el-row :gutter="24">
          <el-col :span="2"> 选择产品下拉组件 </el-col>
          <el-col :span="10">
            <enjoy-select-product v-model="form.product">
            </enjoy-select-product>
          </el-col>
          <el-col :span="12">选中值：{{ form.product }}</el-col>
        </el-row>
        <!--  模板下拉选择 -->
        <el-row :gutter="24">
          <el-col :span="2"> 选择模板下拉组件 </el-col>
          <el-col :span="10">
            <enjoy-select-template v-model="form.template">
            </enjoy-select-template>
          </el-col>
          <el-col :span="12">选中值：{{ form.template }}</el-col>
        </el-row>
        <!--  项目下拉选择 -->
        <el-row :gutter="24">
          <el-col :span="2"> 选择模板下拉组件 </el-col>
          <el-col :span="10">
            <enjoy-select-subitems v-model="form.subitems">
            </enjoy-select-subitems>
          </el-col>
          <el-col :span="12">选中值：{{ form.subitems }}</el-col>
        </el-row>

        <!--  供应商下拉选择 -->
        <el-row :gutter="24">
          <el-col :span="2"> 选择供应商下拉组件 </el-col>
          <el-col :span="10">
            <enjoy-select-supplier v-model="form.supplier">
            </enjoy-select-supplier>
          </el-col>
          <el-col :span="12">选中值：{{ form.supplier }}</el-col>
        </el-row>
        <!--  项目模板下拉选择 -->
        <el-row :gutter="24">
          <el-col :span="2"> 选择项目模板下拉组件 </el-col>
          <el-col :span="10">
            <enjoy-select-project v-model="form.project">
            </enjoy-select-project>
          </el-col>
          <el-col :span="12">选中值：{{ form.project }}</el-col>
        </el-row>
        <!--  按部门选择人员弹框选择 -->
        <el-row :gutter="24">
          <el-col :span="2"> 按部门选择人员 </el-col>
          <el-col :span="10">
            <enjoy-person-by-dept v-model="form.personsByDept" :single="true">
            </enjoy-person-by-dept>
          </el-col>
          <el-col :span="12">选中值：{{ form.personsByDept }}</el-col>
        </el-row>
        <!--  树形下拉选择部门 -->
        <el-row :gutter="24">
          <el-col :span="2"> 树形下拉选择部门 </el-col>
          <el-col :span="10">
            <enjoy-select-dept-tree v-model="form.treeDept" >
            </enjoy-select-dept-tree>
          </el-col>
          <el-col :span="12">选中值：{{ form.treeDept }}</el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="2"> 文件上传 </el-col>
          <el-col :span="10">
            <file-upload
              v-model="form.file"
              @change="fileChange"
            ></file-upload>
          </el-col>
          <el-col :span="12">选中值：{{ form.file }}</el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="2"> 表单文件上传 </el-col>
          <el-col :span="10">
            <file-upload-input
              v-model="form.file"
              @change="fileChange"
            ></file-upload-input>
          </el-col>
          <el-col :span="12">选中值：{{ form.file }}</el-col>
        </el-row>
        <!--        按部门选择用户弹框组件-->
        <el-row :gutter="24">
          <el-col :span="2"> 按部门选择用户树形弹框 </el-col>
          <el-col :span="10">
            <el-button @click="userDialogVisible = true" type="primary" size="small">
              点我打开
            </el-button>
            <enjoy-user-tree-dialog :visible.sync="userDialogVisible" :single="true" title="自定义标题" @change="handlerDialogChange"></enjoy-user-tree-dialog>
          </el-col>
          <el-col :span="12">选中值：{{ form.userList }}</el-col>
        </el-row>
        <!--        抽屉组件-->
        <el-row :gutter="24">
          <el-col :span="2"> 抽屉组件 </el-col>
          <el-col :span="10">
            <el-button @click="visible = true" type="primary" size="small">
              点我打开
            </el-button>
            <enjoy-drawer :visible.sync="visible" title="自定义标题">
              <div slot="body">
                自定义内容
              </div>
            </enjoy-drawer>
          </el-col>
        </el-row>
        <!--        树形表格组件-->
        <el-row :gutter="24">
          <el-col :span="2"> 树形表格 </el-col>
          <el-col :span="22">
            <enjoy-tree-table></enjoy-tree-table>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </el-card>
</template>

<script>
import EnjoySelectUser from "@/components/EnjoySelectUser";
import EnjoyIndicatorCoding from '@/components/EnjoyIndicatorCoding'
import EnjoySelectPart from "@/components/EnjoySelectPart";
import EnjoySelectSupplier from "@/components/EnjoySelectSupplier";
import FileUploadInput from "@/components/FileUploadInput";
import EnjoyDrawer from "@/components/EnjoyDrawer";
import EnjoyPersonByDept from "@/components/EnjoyPersonByDept";
import EnjoyTreeTable from "@/components/EnjoyTreeTable";
import EnjoySelectProduct from "@/components/EnjoySelectProduct";
import EnjoySelectTemplate from "@/components/EnjoySelectTemplate";
import EnjoySelectSubitems from "@/components/EnjoySelectSubitems";
import EnjoySelectProject from "@/components/EnjoySelectProject";
import EnjoyUserTreeDialog from "@/components/EnjoyUserTreeDialog";
import EnjoySelectDeptTree from "@/components/EnjoySelectDeptTree";

export default {
  name: "comp-demo",
  components: {
    FileUploadInput,
    EnjoyIndicatorCoding,
    EnjoySelectUser,
    EnjoySelectPart,
    EnjoyDrawer,
    EnjoyPersonByDept,
    EnjoyTreeTable,
    EnjoySelectProject,
    EnjoySelectSupplier,
    EnjoySelectProduct,
    EnjoySelectTemplate,
    EnjoySelectSubitems,
    EnjoyUserTreeDialog,
    EnjoySelectDeptTree,
  },
  data() {
    return {
      form: {
        users: [{ id: 89, name: "冯总" }],
        part: undefined,
        supplier: undefined,
        project: undefined,
        personsByDept: [],
        treeDept: undefined,
        product: undefined,
        template: undefined,
        subitems: undefined,
        userList: undefined,
        ptTargetCode: undefined,
      },
      visible: false,
      userDialogVisible: false,
      roleId: 202412,
      dirId: 1078,
      obj: {
        dynamic: [
          {
            input: 1,
            select: 1,
            radio: 1,
          },
          {
            input: 2,
            select: 2,
            radio: 1,
          },
        ],
      },
      option: {
        labelWidth: 110,
        column: [
          {
            label: "输入框",
            prop: "input1",
            minWidth: 280,
            span: 12,
            row: true,
          },
          {
            label: "子表单",
            prop: "dynamic",
            type: "dynamic",
            span: 24,
            children: {
              align: "center",
              headerAlign: "center",
              rowAdd: (done) => {
                this.$message.success("新增回调");
                done({
                  input: "默认值",
                });
              },
              rowDel: (row, done) => {
                this.$message.success("删除回调" + JSON.stringify(row));
                done();
              },
              column: [
                {
                  width: 200,
                  label: "输入框",
                  prop: "input",
                  formslot: true,
                },
                {
                  width: 200,
                  label: "选择框",
                  prop: "select",
                  type: "select",
                  rules: [
                    {
                      type: "number",
                      required: true,
                      message: "请选择选择框",
                    },
                  ],
                  dicData: [
                    {
                      label: "测试1",
                      value: 1,
                    },
                    {
                      label: "测试2",
                      value: 2,
                    },
                  ],
                },
                {
                  width: 200,
                  label: "多选",
                  prop: "checkbox",
                  type: "checkbox",
                  dicData: [
                    {
                      label: "测试1",
                      value: 1,
                    },
                    {
                      label: "测试2",
                      value: 2,
                    },
                  ],
                },
                {
                  width: 200,
                  label: "开关",
                  prop: "switch",
                  type: "switch",
                  dicData: [
                    {
                      label: "测试1",
                      value: 1,
                    },
                    {
                      label: "测试2",
                      value: 2,
                    },
                  ],
                },
                {
                  width: 200,
                  label: "数字框",
                  prop: "number",
                  type: "number",
                },
              ],
            },
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    handlerDialogChange(e){
      console.log(e)
      this.form.userList = e
    },
    fileChange(e) {
      console.log(e);
    },
    uploadSucceedGj(file) {
      // const curFile = file[file.length - 1]
      // const params = {
      //   extraId: this.row.optimizationId,
      //   fileType: '4',
      //   fileName: curFile.name,
      //   filePath: curFile.url
      // }
    },
    deleteFile(file) {},
    // 点击刷新按钮
    refreshChange() {
      this.onLoad(this.page, this.search);
    },
    // 当前页码改变
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    // 每页数量改变
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    // 表格搜索
    searchChange(params, done) {
      this.page.currentPage = 1;
      this.search = params;
      this.getThreeELementsList(this.page, this.search);
      done();
    },
    // 列表
    onLoad(page, params = {}) {
      this.loading = true;
      threeElementsList({
        pageNum: page.currentPage,
        pageSize: page.pageSize,
        ...Object.assign(params, this.search),
      })
        .then((res) => {
          const { code, data } = res;
          if (code === 200) {
            const list = data.list;
            this.curdData = list;
            this.page.total = data.total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style scoped>
::v-deep .el-form .el-row:last-child {
  margin-bottom: 0;
}
::v-deep .el-row {
  margin-bottom: 10px;
}
::v-deep .el-form-item {
  margin-bottom: 10px;
}
.table-page-search-wrapper {
  font-size: 14px;
}
::v-deep .el-row {
  line-height: 32px;
}
</style>
